<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>活动中心</title>
		<!-- <meta http-equiv="Access-Control-Allow-Origin" content="*"> -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
		<!-- <script src="../js/jedate.js"></script> -->
		<link rel="stylesheet" href=" ../layui/css/layui.css" />
		<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
		<link rel="stylesheet" href="../../css/userStyle.css">
		<link type="text/css" rel="stylesheet" href="test/jeDate-test.css">
		<link type="text/css" rel="stylesheet" href="skin/jedate.css">
		<style>
			.input {
				width: 250px;
				height: 30px;
				border: 1px solid #ccc;
				padding: 7px 0px;
				border-radius: 15px;
				padding-left: 5px;
				-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
				-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
				-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
				transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
			}
			
			.input:focus {
				border-color: red;
				outline: 0;
				-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
			}
			
			.zw {
				Margin:50px;
			}
		</style>
		<script>

		</script>

	</head>


	<body style="margin: 0px 0px;">

		<div class="test">
			<!-- 内容头部 -->
			<div id=".top" style="">
				<div style="width: 100%; height: 80px; background-color: aqua;position:fixed;top:0px;left:0px;z-index: 1000;">
					<div style="height: 100%;width: 10%; background-color: red; margin-left: 5px; float: left;">
						<img src="../img/HaiBaLogo.png" style="height: 100%; width: 100%;" />
					</div>
					<div id="search-form" style="color: red; height: 100%;width: 18%; float: left; text-align:center;line-height:75px;margin-left: 20%;">
							<input class="input" oninput="search()" id="search" placeholder="查找活动" type="text" />
					</div>
					<a href="/ComeOnProject01/html/userActivity.html" target="_parent">
						<div style="height: 100%;width: 10%; float: left; margin-left: 5%; text-align:center;line-height:75px ;">活动中心</div>
					</a>
					<a href="/ComeOnProject01/renchunxu/personal.html" target="_parent">
						<div style="height: 100%;width: 10%; float: left; margin-left: 10px; text-align:center;line-height:75px ;">个人中心</div>
					</a>
					<a class="exit" href="../User/UserLogin.html" target="_parent">
						<div style="height: 100%;width: 10%; float: left;  text-align:center;line-height:75px; margin-left: 10px;">
							退出
						</div>
					</a>

				</div>
			</div>

			<div class="container-fluid " id="zw" style="margin: 70px;">

				<!-- 正文区域 -->
				<section class="content container">

					<!-- .box-body -->
					<div class="box-header with-border">
						<div>
							<h3 class="box-title">活动中心</h3>
							<a href="/ComeOnProject01/CreateActivity.html" style="float: right;">添加活动</a>
						</div>
					</div>
					<div class="box-body seeac" v-if="ac!=null">
						<ul class="timeline" v-for="(activity,index) in ac">

							<!-- /.timeline-label -->

							<!-- 时间管理活动列表一: -->
							<li class="timeline-body" id="tb">
								<i class="fa fa-child bg-blue"></i>
								<div class="col-lg-10 timeline-item">
									<span class="timeline-header" style="">{{activity.activityStarttime}}至{{activity.activityEndtime}}</span>

									<div class="timeline-body">

										<div class="row data-type " style="padding-top: 15px">
											<!--盒子左边-->
											<div class="col-md-5">
												<!-- Widget: user widget style 1 -->
												<div class="box box-widget widget-user">
													<!-- Add the bg color to the header using any of the bg-* classes -->
													<div class="widget-user-header " style="background: #4066B2;">
														<span style="float: right;color: white;">{{activity.status.statusName}}</span>
														<span class="widget-user-username" style="color: white;">{{activity.activityName}}</span>
														<button type="button" class="btn btn-default btn-xs" id="ad" style="background: transparent;border:none"
														 v-bind:value="activity.activityId" v-on:click='update(index)' data-toggle="modal" data-target="#myModal">
															<span style="color: white;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
														</button>

													</div>

													<div class="box-footer" style="background: #4066B2;">
														<div class="row">
															<div class="col-sm-4 border-right">
																<div class="description-block">
																	<h5 class="description-header" style="color: white;">参与人数</h5>
																	<span class="description-text" style="color: white;">{{activity.sum}}</span>
																</div>
																<!-- /.description-block -->
															</div>
															<div class="col-sm-4 border-left">
																<div class="description-block">

																</div>
															</div>
															<!-- /.col -->
															<div class="col-sm-4 border-left">
																<div class="description-block">
																	<h5 class="description-header" style="color: white;">消息记录</h5>
																	<span class="description-text" style="color: white;">{{activity.msgNum}}</span>
																</div>
																<!-- /.description-block -->
															</div>
															<!-- /.col -->
														</div>
														<!-- /.row -->
													</div>
												</div>
												<!-- /.widget-user -->
											</div>
											<!--盒子右边-->
											<div class="col-md-7 border-right">
												<div class="box box-widget widget-user">
													<div class="widget-user-header">
														<span class="widget-user-username">活动功能 </span>
													</div>
													<div class="box-footer">
														<div class="row" style="text-align: center;">
															<div style="float: left;margin-left: 25%;">
																<p style="font-size: 20px;">{{activity.activityIncome}}</p>
																<span style="font-weight: 800;">累计收入</span>
															</div>

															<!-- /.col -->

															<div>
																<a href="#" @click="danmu(activity.activityId)">
																	<p style="font-size: 20px;">
																		<span style="font-size: 20px;" class="glyphicon glyphicon-blackboard bg-blue"></span>

																	</p>
																	<span style="font-weight: 800;">查看大屏幕</span>
																</a>
															</div>
															<div style="height: 10px;"></div>
														</div>
													</div>
												</div>
											</div>

										</div>

									</div>

								</div>
							</li>

						</ul>

					</div>
					<div v-else style="text-align:center">
						<span style="font-size: 20px;"> 请创建活动！！！</span>
					</div>
					<!-- /.box-body -->

					<!-- .box-footer -->
					<div class="box-footer">
						<div class="box-tools pull-right">
							<ul class="pagination">
								<li>
									<a href="javascript:" aria-label="Previous" @click="getAc(1)">首页</a>
								</li>
								<li>
									<a href="javascript:" v-bind:value="prePage" @click="getAc(prePage)">上一页</a>
								</li>
								<li v-for="count in pages">
									<a href="javascript:" v-bind:src="count" @click="getAc(count)">{{count}}</a>
								</li>
								<li>
									<a href="javascript:" id="next" v-bind:src="nextPage" @click="getAc(nextPage)">下一页</a>
								</li>
								<li>
									<a href="javascript:" aria-label="Next" v-bind:src="pages" @click="getAc(pages)">尾页</a>
								</li>
								<li>
									<a>共<i> {{pages}} </i>页</a>
								</li>
							</ul>
						</div>

					</div>
					<!-- /.box-footer -->
				</section>
			</div>

			<!-- 底部区域 /
			

			<!-- Modal -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">修改活动信息</h4>
						</div>
						<div class="modal-body">
							<div class="row">
								<div class="col-sm-13">
									<div class="row">
										<div class="col-md-13 col-md-offset-1">
											<span class="glyphicon glyphicon-asterisk " aria-hidden="true" style="color: red;"></span> 活动主题：
											<input class="namec" type="text" name="stuno" id="stuno" style="width: 70%;" v-model="namea" />
											<h6 style="margin-left: 15%;">活动主题字数不要超过15字</h6><br /> 活动生效时间：
											<input id="meetings" style="width: 32%;" disabled="disabled" v-model="starttime" />-
											<input class="time" id="test04" style="width: 32%;" v-model='sndtime' />
											<br /><br />
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
							<button type="button" class="btn btn-primary" id="sub" @click="updateu()" id="sumbit">修改</button>
						</div>
					</div>
				</div>

			</div>
		</div>
		<script src=" ../plugins/jQuery/jquery-2.2.3.min.js"></script>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<script src=" ../plugins/jQueryUI/jquery-ui.min.js"></script>
		<script src=" ../plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src=" ../js/vuejs-2.5.16.js"></script>
		<script src=" ../js/axios-0.18.0.js"></script>
		<script src="../layui/layui.all.js"></script>
		<script type="text/javascript" src="src/jedate.js"></script>
		<script src="test/demo.js"></script>
		<script>
			var av;
			$(function() {
				window.onbeforeunload = function() {
					$.ajax({
						type: "get",
						url: "/server/admin/userExit",
						async: true,
						data: {
							userEmail: userEmail,
						},
						success: function(data) {}
					});
				};

				var index = 1;
				var userEmail = localStorage.getItem("userEmail");
				 av = new Vue({
					el: '.test',
					data: {
						active: {},
						ac: [],
						info: {},
						//第一页
						// firstPage: 1,
						//总页数,尾页
						pages: 1,
						//前一页
						prePage: 1,
						//后一页
						nextPage: 1,
						//当前页
						//pageNum: 1,
						fp: 0,
						starttime: "",
						sndtime: "",
						namea: "",
						id: "",
					},
					created: function() {
						this.getall();
						this.getAc();
					},
					methods: {
						getall: function() {
							//为了在内部函数能使用外部函数的this对象，要给它赋值了一个名叫self的变量。
							var self = this;
							$.ajax({
								url: "/server/activity/getActivity?userEmail=" + userEmail + "&currentPage=" + index,
								type: 'get',
								data: {},
								dataType: 'json'
							}).then(function(res) {
								//把从json获取的数据赋值给数组
								self.info = res.data;
								self.ac = res.data.list;
								self.pages = res.data.pages;
								self.prePage = res.data.prePage;
								self.nextPage = res.data.nextPage;
							}).fail(function() {
								console.log('失败');
							})
						},
						getAc: function(page) {
							//为了在内部函数能使用外部函数的this对象，要给它赋值了一个名叫self的变量。
							var self = this;
							$.ajax({
								url: "/server/activity/getActivity?userEmail=" + userEmail + "&currentPage=" + page,
								type: 'get',
								data: {},
								dataType: 'json'
							}).then(function(res) {
								//把从json获取的数据赋值给数组
								console.log(res);
								self.info = res.data;
								self.ac = res.data.list;
								self.pages = res.data.pages;
								self.prePage = res.data.prePage;
								self.nextPage = res.data.nextPage;
							}).fail(function() {
								// console.log('失败');
							})
						},
						update: function(id) {
							var intInd = parseInt(id);
							var acv = av.$data.ac[intInd];
							av.$data.namea = acv.activityName;
							av.$data.starttime = acv.activityStarttime;
							av.$data.sndtime = acv.activityEndtime;
							av.$data.id = acv.activityId;
						},
						danmu: function(id) {
							console.log(id);
							localStorage.setItem("activityId", id);
							location.href = "/ComeOnProject01/danmu/danmu.html";
						},
						updateu:function(){
							
								var name =  $(".namec").val();
								console.log(name);
								var sndtime =$("#test04").val() ;
								console.log(sndtime);
								var id = av.$data.id;
								axios({
									type: "post",
									url: "/server/activity/update",
									//参数
									params: {
										id: id,
										name: name,
										sndtime: sndtime,
									}
								}).then(function(res) {
									var msg = res.data.msg;
									if (msg == "成功") {
										layer.msg("修改成功")
										location.href = "/ComeOnProject01/html/userActivity.html"
									} else {
										layer.msg("错误信息:" + msg, function() {})
									}
							
								})
							
							
						}

					},
					
				});

				

			});
			$(".namec").click(function() {
				var l = $(".namec").val;
				console.log(l);
				var len = l.match(/[^ -~]/g) == null ? l.length : l.length + l.match(/[^ -~]/g).length;

				if ($(".namec").val() == "") {
					layer.msg("活动名称不能为空");
					$("#sub").attr("disabled", "disabled");
				} 
				 if (len > 30) {
					layer.msg("活动名称不能多于15字");
					$("#sub").attr("disabled", "disabled");
				} else {
					$("#sub").removeAttr("disabled");
				}
			})



			$(".time").click(function() {
				if ($(".time").val() == "") {
					layer.msg("时间不能为空");
					$("#sub").attr("disabled", "disabled");
				} else {
					$("#sub").removeAttr("disabled");
				}
			})
			
			$("#sub").click(function() {
				var name =  $(".namec").val;
				console.log(name);
				var sndtime =$("#test04").val ;
				console.log(sndtime);
				var id = av.$data.id;
				axios({
					type: "post",
					url: "/server/activity/update",
					//参数
					params: {
						id: id,
						name: name,
						sndtime: sndtime,
					}
				}).then(function(res) {
					var msg = res.data.msg;
					if (msg == "成功") {
						layer.msg("修改成功")
						location.href = "/ComeOnProject01/html/userActivity.html"
					} else {
						layer.msg("错误信息:" + msg, function() {})
					}

				})
			})

			var proposals = [""];
			$(function() {
				$(".exit").click(function() {
					var userEmail = localStorage.getItem("userEmail");
					localStorage.removeItem("userEmail");
					if (userEmail == null) {
						alert("您还未登录,请先登录")
						window.location.href = "User/UserLogin.html";
					} else {
						$.ajax({
							type: "get",
							url: "/server/admin/userExit",
							async: true,
							data: {
								userEmail: userEmail,
							},
							success: function(data) {
								localStorage.removeItem("userEmail");
								localStorage.removeItem("userId")
								window.location.href = "User/UserLogin.html"
							}
						});
					}
				});

				$(document).ready(function() {
					$('#search-form').autocomplete({
						hints: proposals,
						onSubmit: function(text) {
							$('#message').html('Selected: <b>' + text + '</b>');
						}
					});
				});

			})



			function myFunction() {
				proposals.splice(0, proposals.length);
				var userName = $(".input").val();
				$.ajax({
					type: "get",
					url: "/server/activity/getActivityName",
					async: false,
					data: {
						activityName: userName,
					},
					success: function(data) {
						console.log(data.msg)
						if ("OK" == data.msg && proposals[0] == null) {
							for (var i = 0; i < data.data.length; i++) {
								console.log(data.data.length)
								proposals.push(data.data[i].activityName)
							}
						}

						console.log(proposals)
					}
				});
			}
			
			function search(){
				var userEmail=localStorage.getItem("userEmail");
				var name=$("#search").val();
				$.ajax({
					type:"get",
					url:"/server/activity/getActivity",
					async:true,
					data:{
						userEmail:userEmail,
						name:name,
					},
					success:function(data){
						av.$data.info = data.data;
						av.$data.ac = data.data.list;
						av.$data.pages = data.data.pages;
						av.$data.prePage = data.data.prePage;
						av.$data.nextPage = data.data.nextPage;
					}
				});
			
			}
			
		</script>
	</body>

</html>
